<template>
  <div>
    <top-nav/>
    <div class="container">
      <!-- <el-row :gutter="20">
        <el-skeleton :rows="3" animated v-if="lessonLoading" />
        <span v-if="datas.length == 0 && !lessonLoading">暂无数据</span>
        <el-col
          :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
          class="mb10 cur"
          v-for="(item,index) in datas"
          v-show="!lessonLoading"
          :key="index"
        >
          <div class="hover" :style="'background:' + item.bg">
            <div :title="item.tip">
              <div style="text-align: center;padding: 10px 0;font-size: 18px;color: #333;">{{ item.label }}</div>
              <p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 0 10px;box-sizing: border-box;margin: 0 0 10px 0;color: #666;">{{ item.tip }}</p>
            </div>
            <el-button
              @click="download(item)"
              class="download"
              :loading="item.load"
              :disabled="item.load"
              :style="{color: item.load?'#ccc':'',background: item.bg}"
            >{{item.load?'':'下载'}}</el-button>
          </div>
        </el-col>
      </el-row> -->
      <div style="margin-top: 20px;padding-top: 20px;border-top: 1px solid rgba(0, 0, 0, .1);">
        <el-row :gutter="20">
          <el-col
            v-for="(item,index) in study"
            :key="index"
            :xs="12"
            :sm="8"
            :md="6"
            :lg="4"
            :xl="4"
          >
            <span style="cursor: pointer;" @click="preview(item)">{{ item.label }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import topNav from '@/components/topNav'
import { htmlView } from './htmlView'
console.log(htmlView)
import axios from 'axios'
export default {
  components: {
    topNav
  },
  data () {
    return {
      datas: [
        {
          label: '2-7周',
          load: false,
          tip: 'JavaScript基础2-7周的课程资料',
          bg: `#${Math.random().toString(16).substring(2,8)}33`
        }
      ],
      // 练习
      study: htmlView,
      lessonLoading: false
    }
  },
  mounted() {
    this.lessonLoading = true
    setTimeout(() => {
      this.lessonLoading = false
    }, 1000)
  },
  methods: {
    download(e) {
      e.load = true
      setTimeout(() => {
        e.load = false
      })
      window.open(`${process.env.VUE_APP_CODE_URL}/lesson/${e.label}.zip`,'_blank');
      
      // axios({
      //   // url: `${process.env.VUE_APP_CODE_URL}/lesson/${e.label}.zip`,
      //   responseType: 'blob'
      // }).then(response => {
      //   const blob = new Blob([response.data], {type: 'application/zip'});
      //   const downloadElement = document.createElement('a');
      //   const href = window.URL.createObjectURL(blob); //创建下载的链接
      //   downloadElement.href = href;
      //   downloadElement.download = `${e.label}`;
      //   document.body.appendChild(downloadElement);
      //   downloadElement.click(); //点击下载
      //   document.body.removeChild(downloadElement); //下载完成移除元素
      //   window.URL.revokeObjectURL(href); //释放blob对象
      //   e.load = false
      // })
    },
    // 中断请求
    cancelRequest(){
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();
      source.cancel("abort。");
    },
    preview(row) {
      this.$router.push({
        path: '/htmlView',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
body{
  background: red;
}
.hover{
  border-radius: 4px;
  transition: .3s;
  overflow: hidden;
  background: #fff;
}
.container{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  .cur{
    height: 113px;
    cursor: default;
    transition: .3s;
  }
  .download{
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background: #409eff;
    border-radius: 0;
  }
}
</style>